/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-06-14 15:20:07
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-08-02 11:51:08
 * @File Name: login.js
 */

import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity,
    ActivityIndicator,

} from 'react-native';

import Tips from '../common/tips';
import Register from './register';
import ForgotPassword from './forgotPassword';
import LetsMeet from './letsMeet';

export default class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            ajax: false,
            activeOpacity: 1,
        };
    }

    shouldComponentUpdate(props, states) {
        let color = '#999', activeOpacity = 1;
        if (states.username && states.password && states.password.length >= 6) {
            color = '#3FAFE4', activeOpacity = 0;
        }
        this.refs.loginButton.setNativeProps({ style: { backgroundColor: color } });
        states.activeOpacity = activeOpacity;
        return true;

    }

    render() {
        return (
            <View style={styles.container} onStartShouldSetResponder={() => this.containerTouched() }>

                <View style={styles.body}>
                    <View>
                        <TextInput
                            style={styles.input}
                            placeholder={Lang.login_username}
                            clearButtonMode={'while-editing'}
                            autoCorrect={false}
                            autoCapitalize = {"none"}
                            ref={"username"}
                            onChangeText={(username) => { this.setState({ username: username }); } }
                            />
                        <TextInput
                            style={styles.input}
                            placeholder={Lang.login_password}
                            clearButtonMode={'while-editing'}
                            autoCorrect={false}
                            autoCapitalize = {"none"}
                            secureTextEntry={true}
                            ref={"password"}
                            onChangeText={(password) => { this.setState({ password: password }); } }
                            />
                    </View>
                    <View style={styles.forgotPassword}>
                        <Text suppressHighlighting={true} style={styles.forgotText} onPress={() => this.goForgotPassword() }>
                            {Lang.login_forgotpwd}
                        </Text>
                    </View>
                    <TouchableOpacity activeOpacity={this.state.activeOpacity} onPress={() => this.loginAction() }>
                        <View style={styles.botton} ref='loginButton'>
                            {this.state.ajax ?
                                <ActivityIndicator
                                    animating={true}
                                    style={styles.centering}
                                    size={'small'}
                                    color='#fff'
                                    />
                                : <Text suppressHighlighting={true} style={styles.submit} >{Lang.login_login}</Text>}
                        </View>
                    </TouchableOpacity>
                    <View style={styles.joinfree}>
                        <TouchableOpacity onPress={() => this.gotoRegister() }>
                            <Text suppressHighlighting={true} style={styles.joinfreeText} >{Lang.login_register}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <Tips ref='tips'/>
            </View>
        );
    }


    gotoRegister() {
        Utils.navJumpTo(this.props.navigator, {
            name: "Register",
            component: Register,
            title: "Register",
        });
    }

    goForgotPassword() {
        Utils.navJumpTo(this.props.navigator, {
            name: 'ForgotPassword',
            component: ForgotPassword,
            title: Lang.login_forgotpwd
        });
    }

    gotoLetsMeet() {
        Utils.navClearTo(this.props.navigator, {
            name: 'LetsMeet',
            component: LetsMeet,
            title: 'Let\'s Meet',
            navBarType: 1,
            RightButton: 'heart',
        })
    }

    containerTouched(event) {
        this.refs.username.blur();
        this.refs.password.blur();
    }

    loginAction() {
        let tthis = this;
        tthis.containerTouched();
        if (tthis.state.ajax) return;
        tthis.setState({ajax: true});
        if (tthis.state.username && tthis.state.password && tthis.state.password.length >=6) {
            Share.fetchMain({
                url: 'login',
                data: tthis.state,
                callback: function (data) {
                    if (typeof (data.errcode) == 'undefined') {
                        Share.setStorage('session_user_id', JSON.stringify(data));
                        tthis.gotoLetsMeet(tthis.props.navigator);
                    } else {
                        tthis.refs.tips.showTips({type: 'error', msg: data.errmsg });
                        tthis.setState({ajax: false});
                    }
                }
            })
        } else {
            tthis.setState({ajax: false});
        }

    }
}

const styles = StyleSheet.create(Css.LoginStyle);